<template>
  <div class="test-message-container">
    <Navbar />
    
    <div class="container">
      <div class="test-header">
        <h1>消息提示测试页面</h1>
        <p>测试所有类型的消息提示效果</p>
      </div>
      
      <div class="test-grid">
        <div class="test-section">
          <h3>消息提示 (Message)</h3>
          <div class="button-group">
            <button @click="testSuccessMessage" class="test-btn success">
              成功消息
            </button>
            <button @click="testWarningMessage" class="test-btn warning">
              警告消息
            </button>
            <button @click="testErrorMessage" class="test-btn error">
              错误消息
            </button>
            <button @click="testInfoMessage" class="test-btn info">
              信息消息
            </button>
          </div>
        </div>
        
        <div class="test-section">
          <h3>通知 (Notification)</h3>
          <div class="button-group">
            <button @click="testSuccessNotification" class="test-btn success">
              成功通知
            </button>
            <button @click="testWarningNotification" class="test-btn warning">
              警告通知
            </button>
            <button @click="testErrorNotification" class="test-btn error">
              错误通知
            </button>
            <button @click="testInfoNotification" class="test-btn info">
              信息通知
            </button>
          </div>
        </div>
        
        <div class="test-section">
          <h3>长时间通知</h3>
          <div class="button-group">
            <button @click="testLongNotification" class="test-btn info">
              客服信息通知
            </button>
            <button @click="testPersistentNotification" class="test-btn warning">
              持久通知 (不自动关闭)
            </button>
          </div>
        </div>
        
        <div class="test-section">
          <h3>快捷操作反馈</h3>
          <div class="button-group">
            <button @click="testFeedback" class="test-btn primary">
              测试操作反馈
            </button>
            <button @click="testCustomerService" class="test-btn info">
              客服信息
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage, ElNotification } from 'element-plus'
import { message, notify, confirm, feedback, showCustomerService } from '@/utils/message'
import Navbar from '@/components/Navbar.vue'

export default {
  name: 'TestMessageView',
  components: {
    Navbar
  },
  setup() {
    // 测试基本消息提示
    const testSuccessMessage = () => {
      ElMessage.success('这是一个成功消息！操作已完成。')
    }
    
    const testWarningMessage = () => {
      ElMessage.warning('这是一个警告消息！请注意检查。')
    }
    
    const testErrorMessage = () => {
      ElMessage.error('这是一个错误消息！操作失败。')
    }
    
    const testInfoMessage = () => {
      ElMessage.info('这是一个信息消息！供您参考。')
    }
    
    // 测试通知
    const testSuccessNotification = () => {
      ElNotification.success({
        title: '操作成功',
        message: '您的操作已经成功完成，系统已自动保存。'
      })
    }
    
    const testWarningNotification = () => {
      ElNotification.warning({
        title: '注意事项',
        message: '请确认您的操作，某些更改可能无法撤销。'
      })
    }
    
    const testErrorNotification = () => {
      ElNotification.error({
        title: '操作失败',
        message: '由于网络连接问题，操作未能完成。请稍后重试。'
      })
    }
    
    const testInfoNotification = () => {
      ElNotification.info({
        title: '系统提示',
        message: '系统将在 30 分钟后进行维护，请及时保存您的工作。'
      })
    }
    
    const testLongNotification = () => {
      ElNotification.info({
        title: '客服信息',
        message: '客服电话：400-888-8888\n工作时间：9:00-18:00\n邮箱：support@pcbcsm.com\n在线客服：工作日全天候服务',
        duration: 8000
      })
    }
    
    const testPersistentNotification = () => {
      ElNotification.warning({
        title: '重要提醒',
        message: '这是一个持久通知，需要手动关闭。点击右上角 X 按钮关闭。',
        duration: 0
      })
    }
    
    // 测试操作反馈
    const testFeedback = () => {
      const operations = [
        () => feedback.success('保存'),
        () => feedback.error('删除', '文件不存在'),
        () => feedback.deleted(3),
        () => feedback.updated(),
        () => feedback.networkError(),
        () => feedback.paramError('用户名')
      ]
      
      // 随机选择一个操作
      const randomOp = operations[Math.floor(Math.random() * operations.length)]
      randomOp()
    }
    
    const testCustomerService = () => {
      showCustomerService()
    }
    
    return {
      testSuccessMessage,
      testWarningMessage,
      testErrorMessage,
      testInfoMessage,
      testSuccessNotification,
      testWarningNotification,
      testErrorNotification,
      testInfoNotification,
      testLongNotification,
      testPersistentNotification,
      testFeedback,
      testCustomerService
    }
  }
}
</script>

<style scoped>
.test-message-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: #ffffff;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.test-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

.test-header h1 {
  font-size: 32px;
  margin-bottom: 12px;
  background: linear-gradient(45deg, #00D4FF, #4F46E5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.test-header p {
  font-size: 16px;
  color: #B0BEC5;
  margin: 0;
}

.test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
}

.test-section {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 24px;
}

.test-section h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #00D4FF;
  text-align: center;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.test-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
}

.test-btn.success {
  background: linear-gradient(135deg, #10b981, #059669);
}

.test-btn.success:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
}

.test-btn.warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.test-btn.warning:hover {
  background: linear-gradient(135deg, #d97706, #b45309);
  transform: translateY(-2px);
}

.test-btn.error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.test-btn.error:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-2px);
}

.test-btn.info {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.test-btn.info:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .test-grid {
    grid-template-columns: 1fr;
  }
  
  .container {
    padding: 12px;
  }
  
  .test-header h1 {
    font-size: 24px;
  }
}
</style> 